﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html class="no-js" lang="">

<head>
    <!-- Meta Data -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cirkle | Single Blog</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/static/media/favicon.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/icofont/icofont.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/slick-carousel/css/slick.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/slick-carousel/css/slick-theme.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/magnific-popup/css/magnific-popup.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/sal.js/sal.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/mcustomscrollbar/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/dependencies/select2/css/select2.min.css">

    <!-- Site Stylesheet -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/app.css">
    <!-- Google Web Fonts -->
    <link href="${pageContext.request.contextPath}/Directory/https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400&display=swap" rel="stylesheet">
</head>

<body class="bg-link-water">
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="${pageContext.request.contextPath}/Directory/https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<a href="#wrapper" data-type="section-switch" class="scrollup">
    <i class="icofont-bubble-up"></i>
</a>
<!-- Preloader Start Here -->
<div id="preloader"></div>
<!-- Preloader End Here -->
<div id="wrapper" class="wrapper">
    <!-- Top Header -->
    <header class="fixed-header">
        <div class="header-menu">
            <div class="navbar">
                <div class="nav-item d-none d-sm-block">
                    <div class="header-logo">
                        <a href="${pageContext.request.contextPath}/Directory/index"><img src="${pageContext.request.contextPath}/static/media/logo.png" alt="Cirkle"></a>
                    </div>
                </div>
                <div class="nav-item nav-top-menu">
                    <nav id="dropdown" class="template-main-menu">
                        <ul class="menu-content">
                            <li class="header-nav-item">
                                <a href="${pageContext.request.contextPath}/Directory/index" class="menu-link active">Home</a>
                            </li>
                            <li class="header-nav-item">
                                <a href="${pageContext.request.contextPath}/Directory/#" class="menu-link have-sub">Community</a>
                                <ul class="mega-menu mega-menu-col-2">
                                    <li>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/newsfeed">NewsFeed</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-timeline">Profile Timeline</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-about">Profile About</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-friends">Profile Friends</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-groups">Profile Group</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-photo">Profile Photo</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-video">Profile Video</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/user-badges">Profile Badges</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums">Forums</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums-forum">Forums Topic</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums-timeline">Forums Timeline</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums-info">Forums Info</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums-members">Forums Members</a>
                                            </li>
                                            <li>
                                                <a href="${pageContext.request.contextPath}/Directory/forums-media">Forums Media</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="header-nav-item">
                                <a href="${pageContext.request.contextPath}/Directory/#" class="menu-link have-sub">Pages</a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="${pageContext.request.contextPath}/Directory/about-us">About</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/Directory/user-blog">Blog</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/Directory/shop">Shop</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/Directory/single-blog">Blog Details</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/Directory/single-shop">Shop Details</a>
                                    </li>
                                    <li>
                                        <a href="${pageContext.request.contextPath}/Directory/contact">Contact Us</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="nav-item header-control">
                    <div class="inline-item d-none d-md-block">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search here.......">
                            <div class="input-group-append">
                                <button class="submit-btn" type="button"><i class="icofont-search"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="inline-item d-flex align-items-center">
                        <div class="dropdown dropdown-cart">
                            <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                                <i class="icofont-shopping-cart"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <div class="item-heading">
                                    <h6 class="heading-title">Shopping Cart: <span>3</span></h6>
                                </div>
                                <div class="item-body">
                                    <div class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/cart_1.jpg" alt="Product">
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title"><a href="${pageContext.request.contextPath}/Directory/#">Black Coffee Mug</a></h6>
                                            <div class="item-category">COFFEE MUGS</div>
                                            <div class="item-price">$29 x 1</div>
                                            <div class="btn-area">
                                                <a href="${pageContext.request.contextPath}/Directory/#" class="close-btn"><i class="icofont-ui-close"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/cart_2.jpg" alt="Product">
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title"><a href="${pageContext.request.contextPath}/Directory/#">Head Phone</a></h6>
                                            <div class="item-category">Assets</div>
                                            <div class="item-price">$15 x 1</div>
                                            <div class="btn-area">
                                                <a href="${pageContext.request.contextPath}/Directory/#" class="close-btn"><i class="icofont-ui-close"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/cart_3.jpg" alt="Product">
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title"><a href="${pageContext.request.contextPath}/Directory/#">Black Watch</a></h6>
                                            <div class="item-category">Watch</div>
                                            <div class="item-price">$59 x 1</div>
                                            <div class="btn-area">
                                                <a href="${pageContext.request.contextPath}/Directory/#" class="close-btn"><i class="icofont-ui-close"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-footer">
                                    <a href="${pageContext.request.contextPath}/Directory/#" class="view-btn">View All Product</a>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown dropdown-friend">
                            <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                                <i class="icofont-users-alt-4"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <div class="item-heading">
                                    <h6 class="heading-title">Friend Requests</h6>
                                    <div class="heading-btn">
                                        <a href="${pageContext.request.contextPath}/Directory/#">Settings</a>
                                        <a href="${pageContext.request.contextPath}/Directory/#">Mark all as Read</a>
                                    </div>
                                </div>
                                <div class="item-body">
                                    <div class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/chat_5.jpg" alt="Notify">
                                            <span class="chat-status offline"></span>
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title"><a href="${pageContext.request.contextPath}/Directory/#">Lily Zaman</a></h6>
                                            <p>4 in mutual friends</p>
                                            <div class="btn-area">
                                                <a href="${pageContext.request.contextPath}/Directory/#" class="item-btn"><i class="icofont-plus"></i></a>
                                                <a href="${pageContext.request.contextPath}/Directory/#" class="item-btn"><i class="icofont-minus"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/chat_1.jpg" alt="Notify">
                                            <span class="chat-status online"></span>
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title"><a href="${pageContext.request.contextPath}/Directory/#">Ketty Rose</a></h6>
                                            <p>3 in mutual friends</p>
                                            <div class="btn-area">
                                                <a href="${pageContext.request.contextPath}/Directory/#" class="item-btn"><i class="icofont-plus"></i></a>
                                                <a href="${pageContext.request.contextPath}/Directory/#" class="item-btn"><i class="icofont-minus"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/chat_8.jpg" alt="Notify">
                                            <span class="chat-status online"></span>
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title"><a href="${pageContext.request.contextPath}/Directory/#">Rustom vai</a></h6>
                                            <p>6 in mutual friends</p>
                                            <div class="btn-area">
                                                <a href="${pageContext.request.contextPath}/Directory/#" class="item-btn"><i class="icofont-plus"></i></a>
                                                <a href="${pageContext.request.contextPath}/Directory/#" class="item-btn"><i class="icofont-minus"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-footer">
                                    <a href="${pageContext.request.contextPath}/Directory/#" class="view-btn">View All Friend Request</a>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown dropdown-message">
                            <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                                <i class="icofont-speech-comments"></i>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <div class="item-heading">
                                    <h6 class="heading-title">Message</h6>
                                    <div class="heading-btn">
                                        <a href="${pageContext.request.contextPath}/Directory/#">Settings</a>
                                        <a href="${pageContext.request.contextPath}/Directory/#">Mark all as Read</a>
                                    </div>
                                </div>
                                <div class="item-body">
                                    <a href="${pageContext.request.contextPath}/Directory/#" class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/notifiy_1.png" alt="Notify">
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title">Diana Jameson</h6>
                                            <div class="item-time">15 mins ago</div>
                                            <p>when are nknowen printer took galley of types ...</p>
                                        </div>
                                    </a>
                                    <a href="${pageContext.request.contextPath}/Directory/#" class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/notifiy_2.png" alt="Notify">
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title">Quirty</h6>
                                            <div class="item-time">15 mins ago</div>
                                            <p>when are nknowen printer took galley of types ...</p>
                                        </div>
                                    </a>
                                    <a href="${pageContext.request.contextPath}/Directory/#" class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/notifiy_3.png" alt="Notify">
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title">Zinia Jessy</h6>
                                            <div class="item-time">15 mins ago</div>
                                            <p>when are nknowen printer took galley of types ...</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="item-footer">
                                    <a href="${pageContext.request.contextPath}/Directory/#" class="view-btn">View All Messages</a>
                                </div>
                            </div>
                        </div>
                        <div class="dropdown dropdown-notification">
                            <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                                <i class="icofont-notification"></i><span class="notify-count">3</span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <div class="item-heading">
                                    <h6 class="heading-title">Notifications</h6>
                                    <div class="heading-btn">
                                        <a href="${pageContext.request.contextPath}/Directory/#">Settings</a>
                                        <a href="${pageContext.request.contextPath}/Directory/#">Mark all as Read</a>
                                    </div>
                                </div>
                                <div class="item-body">
                                    <a href="${pageContext.request.contextPath}/Directory/#" class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/notifiy_1.png" alt="Notify">
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title">Diana Jameson</h6>
                                            <div class="item-time">15 mins ago</div>
                                            <p>when are nknowen printer took galley of types ...</p>
                                        </div>
                                    </a>
                                    <a href="${pageContext.request.contextPath}/Directory/#" class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/notifiy_2.png" alt="Notify">
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title">Quirty</h6>
                                            <div class="item-time">15 mins ago</div>
                                            <p>when are nknowen printer took galley of types ...</p>
                                        </div>
                                    </a>
                                    <a href="${pageContext.request.contextPath}/Directory/#" class="media">
                                        <div class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/notifiy_3.png" alt="Notify">
                                        </div>
                                        <div class="media-body">
                                            <h6 class="item-title">Zinia Jessy</h6>
                                            <div class="item-time">15 mins ago</div>
                                            <p>when are nknowen printer took galley of types ...</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="item-footer">
                                    <a href="${pageContext.request.contextPath}/Directory/#" class="view-btn">View All Notification</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="inline-item">
                        <div class="dropdown dropdown-admin">
                            <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                                    <span class="media">
                                        <span class="item-img">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/chat_5.jpg" alt="Chat">
                                            <span class="acc-verified"><i class="icofont-check"></i></span>
                                        </span>
                                        <span class="media-body">
                                            <span class="item-title">Rebeca</span>
                                        </span>
                                    </span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <ul class="admin-options">
                                    <li><a href="${pageContext.request.contextPath}/Directory/#">Profile Settings</a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/user-groups">Groups</a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/forums">Forums</a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/#">Settings</a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/#">Terms and Conditions</a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/contact">Contact</a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/login">Log Out</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Sidebar Left -->
    <div class="fixed-sidebar">
        <div class="fixed-sidebar-left small-sidebar">
            <div class="sidebar-toggle">
                <button class="toggle-btn toggler-open">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
            <div class="sidebar-menu-wrap">
                <div class="mCustomScrollbar" data-mcs-theme="dark" data-mcs-axis="y">
                    <ul class="side-menu">
                        <li><a href="${pageContext.request.contextPath}/Directory/newsfeed" class="menu-link" data-toggle="tooltip" data-placement="right" title=" NEWSFEED"><i class="icofont-newspaper"></i></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/user-timeline" class="menu-link" data-toggle="tooltip" data-placement="right" title="MEMBERS TIMELINE"><i class="icofont-list"></i></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/user-groups" class="menu-link" data-toggle="tooltip" data-placement="right" title="GROUPS"><i class="icofont-users-alt-2"></i></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/user-friends" class="menu-link" data-toggle="tooltip" data-placement="right" title="MEMBERS FRIENDS"><i class="icofont-users-alt-4"></i></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/user-photo" class="menu-link" data-toggle="tooltip" data-placement="right" title="GALLERY"><i class="icofont-photobucket"></i></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/user-video" class="menu-link" data-toggle="tooltip" data-placement="right" title="VIDEOS"><i class="icofont-play-alt-1"></i></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/#" class="menu-link" data-toggle="tooltip" data-placement="right" title="EVENT SCHEDULE"><i class="icofont-calendar"></i></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/forums-timeline" class="menu-link" data-toggle="tooltip" data-placement="right" title="FORUM"><i class="icofont-ui-text-chat"></i></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/shop" class="menu-link" data-toggle="tooltip" data-placement="right" title="SHOP"><i class="icofont-shopping-cart"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fixed-sidebar-left large-sidebar">
            <div class="sidebar-toggle">
                <div class="sidebar-logo">
                    <a href="${pageContext.request.contextPath}/Directory/index"><img src="${pageContext.request.contextPath}/static/media/logo2.png" alt="Logo"></a>
                </div>
                <button class="toggle-btn toggler-close">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
            <div class="sidebar-menu-wrap">
                <div class="mCustomScrollbar" data-mcs-theme="dark" data-mcs-axis="y">
                    <ul class="side-menu">
                        <li><a href="${pageContext.request.contextPath}/Directory/newsfeed" class="menu-link"><i class="icofont-newspaper"></i><span class="menu-title">Newsfeed</span></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/user-timeline" class="menu-link"><i class="icofont-list"></i><span class="menu-title">Members Timeline</span></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/user-groups" class="menu-link"><i class="icofont-users-alt-2"></i><span class="menu-title">Groups</span></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/user-friends" class="menu-link"><i class="icofont-users-alt-4"></i><span class="menu-title">Members Friends</span></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/user-photo" class="menu-link"><i class="icofont-photobucket"></i><span class="menu-title">Gallery</span></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/user-video" class="menu-link"><i class="icofont-play-alt-1"></i><span class="menu-title">Videos</span></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/#" class="menu-link"><i class="icofont-calendar"></i><span class="menu-title">Event Schedule</span></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/forums-timeline" class="menu-link"><i class="icofont-ui-text-chat"></i><span class="menu-title">Forum</span></a></li>
                        <li><a href="${pageContext.request.contextPath}/Directory/shop" class="menu-link"><i class="icofont-shopping-cart"></i><span class="menu-title">Shop</span></a></li>
                    </ul>
                    <ul class="top-menu-mobile">
                        <li class="menu-label">Community</li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/user-about" class="menu-link">Profile About</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/user-badges" class="menu-link">Profile Badges</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/forums" class="menu-link">Forums</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/forums-forum" class="menu-link">Forums Topic</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/forums-info" class="menu-link">Forums Info</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/forums-members" class="menu-link">Forums Members</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/forums-media" class="menu-link">Forums Media</a>
                        </li>
                        <li class="menu-label">Pages</li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/about-us" class="menu-link">About</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/user-blog" class="menu-link">Blog</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/shop" class="menu-link">Shop</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/single-blog" class="menu-link">Blog Details</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/single-shop" class="menu-link">Shop Details</a>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/Directory/contact" class="menu-link">Contact Us</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Sidebar Right -->
    <div class="fixed-sidebar right">
        <div class="fixed-sidebar-right small-sidebar">
            <div class="sidebar-toggle" id="chat-head-toggle">
                <button class="chat-icon">
                    <i class="icofont-speech-comments"></i>
                </button>
            </div>
            <div class="sidebar-menu-wrap">
                <div class="mCustomScrollbar" data-mcs-theme="dark" data-mcs-axis="y">
                    <ul class="user-chat-list">
                        <li class="chat-item chat-open">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_1.jpg" alt="chat">
                                <span class="chat-status offline"></span>
                            </div>
                        </li>
                        <li class="chat-item chat-open">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_2.jpg" alt="chat">
                                <span class="chat-status offline"></span>
                            </div>
                        </li>
                        <li class="chat-item chat-open">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_3.jpg" alt="chat">
                                <span class="chat-status offline"></span>
                            </div>
                        </li>
                        <li class="chat-item chat-open">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_4.jpg" alt="chat">
                                <span class="chat-status online"></span>
                            </div>
                        </li>
                        <li class="chat-item chat-open">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_5.jpg" alt="chat">
                                <span class="chat-status online"></span>
                            </div>
                        </li>
                        <li class="chat-item chat-open">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_6.jpg" alt="chat">
                                <span class="chat-status online"></span>
                            </div>
                        </li>
                        <li class="chat-item chat-open">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_7.jpg" alt="chat">
                                <span class="chat-status offline"></span>
                            </div>
                        </li>
                        <li class="chat-item chat-open">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_8.jpg" alt="chat">
                                <span class="chat-status offline"></span>
                            </div>
                        </li>
                        <li class="chat-item chat-open">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_9.jpg" alt="chat">
                                <span class="chat-status offline"></span>
                            </div>
                        </li>
                        <li class="chat-item chat-open">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_10.jpg" alt="chat">
                                <span class="chat-status offline"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Content -->
    <div class="page-content">

        <!--=====================================-->
        <!--=        Newsfeed  Area Start       =-->
        <!--=====================================-->
        <div class="container">
            <div class="block-box user-single-blog">
                <div class="blog-thumbnail">
                    <img src="${pageContext.request.contextPath}/static/media/blog/blog_10.jpg" alt="Blog">
                </div>
                <div class="blog-content-wrap">
                    <div class="blog-entry-header">
                        <div class="entry-category">
                            <a href="${pageContext.request.contextPath}/Directory/#">Community</a>
                            <a href="${pageContext.request.contextPath}/Directory/#">Inspiration</a>
                        </div>
                        <h2 class="entry-title">Spoke with the developer sety make atype specimen book has survived not only five centuries</h2>
                        <div class="row align-items-center">
                            <div class="col-lg-8">
                                <ul class="entry-meta">
                                    <li>
                                        <img src="${pageContext.request.contextPath}/static/media/figure/chat_7.jpg" alt="Chat">
                                        By <a href="${pageContext.request.contextPath}/Directory/#">Fahim Rahman</a>
                                    </li>
                                    <li><i class="icofont-calendar"></i> 15 October, 2020</li>
                                    <li><i class="icofont-comment"></i> Comments: 05</li>
                                    <li><i class="icofont-share"></i> Share: 02</li>
                                </ul>
                            </div>
                            <div class="col-lg-4">
                                <ul class="blog-share">
                                    <li><a href="${pageContext.request.contextPath}/Directory/#" class="bg-fb"><i class="icofont-facebook"></i></a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/#" class="bg-twitter"><i class="icofont-twitter"></i></a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/#" class="bg-dribble"><i class="icofont-dribbble"></i></a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/#" class="bg-youtube"><i class="icofont-youtube"></i></a></li>
                                    <li><a href="${pageContext.request.contextPath}/Directory/#" class="bg-behance"><i class="icofont-behance"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="blog-content">
                        <p>Seohen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets strickcontainingwhen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. </p>
                        <blockquote>
                            <p>Blog estibulum diam metus, varius quis eleifend eget, tincidunt sit amet ante. Etiam quisaccu msan vamus efeliselconvallis, ultrices commodo nisety ncidunt odio, ut varius mi justo. Blog estibulum diam metuultrices commodo erisque et orci convallis, ultrices commodo nisety ncidunt odio, ut varius mi ex quis justo. </p>
                        </blockquote>
                        <p>Seohen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets strickcontainingwhen an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. </p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="content-img">
                                    <img src="${pageContext.request.contextPath}/static/media/blog/blog_11.jpg" alt="Blog">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="content-img">
                                    <img src="${pageContext.request.contextPath}/static/media/blog/blog_12.jpg" alt="Blog">
                                </div>
                            </div>
                        </div>
                        <h3 class="item-title">What’s In Your Mind?</h3>
                        <p>Seohen an unknown printer tok a galley of type and scrambled it to maketypspecimen book. It has survived not only five centuries, but also the leapremaining essentially unchanged.ook.Seohen an unknown printer tok a galley of type and scrambled it to maketypspecimen bs survive but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset shee Ipsum passages, and more recently with desktop publishing.</p>
                    </div>
                    <div class="blog-footer">
                        <div class="item-label">Choose your <span>Reaction!</span></div>
                        <div class="reaction-icon">
                            <a href="${pageContext.request.contextPath}/Directory/#"><img src="${pageContext.request.contextPath}/static/media/figure/reaction_1.png" alt="Like"></a>
                            <a href="${pageContext.request.contextPath}/Directory/#"><img src="${pageContext.request.contextPath}/static/media/figure/reaction_6.png" alt="Like"></a>
                            <a href="${pageContext.request.contextPath}/Directory/#"><img src="${pageContext.request.contextPath}/static/media/figure/reaction_2.png" alt="Like"></a>
                            <a href="${pageContext.request.contextPath}/Directory/#"><img src="${pageContext.request.contextPath}/static/media/figure/reaction_7.png" alt="Like"></a>
                            <a href="${pageContext.request.contextPath}/Directory/#"><img src="${pageContext.request.contextPath}/static/media/figure/reaction_3.png" alt="Like"></a>
                            <a href="${pageContext.request.contextPath}/Directory/#"><img src="${pageContext.request.contextPath}/static/media/figure/reaction_5.png" alt="Like"></a>
                        </div>
                    </div>
                    <div class="blog-comment-form">
                        <h3 class="item-title">Leave a Comment</h3>
                        <form>
                            <div class="row gutters-20">
                                <div class="col-lg-4 form-group">
                                    <input type="text" name="name" class="form-control" placeholder="Name">
                                </div>
                                <div class="col-lg-4 form-group">
                                    <input type="email" name="email" class="form-control" placeholder="E-mail">
                                </div>
                                <div class="col-lg-4 form-group">
                                    <input type="text" name="website" class="form-control" placeholder="website">
                                </div>
                                <div class="col-lg-12 form-group">
                                    <textarea name="message" id="message" class="form-control textarea" placeholder="Comments" cols="30" rows="7"></textarea>
                                </div>
                                <div class="col-lg-12 form-group">
                                    <input type="submit" class="submit-btn" name="post-comment" value="Post Comment">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="realated-blog">
                <div class="block-box blog-heading">
                    <h3 class="heading-title">Related Blog Posts</h3>
                </div>
                <div class="row">
                    <div class="col-lg-4">
                        <div class="block-box user-blog">
                            <div class="blog-img">
                                <a href="${pageContext.request.contextPath}/Directory/#"><img src="${pageContext.request.contextPath}/static/media/blog/blog_4.jpg" alt="Blog"></a>
                            </div>
                            <div class="blog-content">
                                <div class="blog-category">
                                    <a href="${pageContext.request.contextPath}/Directory/#">Community</a>
                                    <a href="${pageContext.request.contextPath}/Directory/#">Inspiration</a>
                                </div>
                                <h3 class="blog-title"><a href="${pageContext.request.contextPath}/Directory/#">Spoke with the developer sety 2020 Gaming Area</a></h3>
                                <div class="blog-date"><i class="icofont-calendar"></i> 15 October, 2020</div>
                                <p>when ann unknown printer took galley type and scrambled it to make aretype specimen book has survived not only.</p>
                            </div>
                            <div class="blog-meta">
                                <ul>
                                    <li class="blog-reaction">
                                        <div class="reaction-icon">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/reaction_1.png" alt="icon">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/reaction_2.png" alt="icon">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/reaction_3.png" alt="icon">
                                        </div>
                                        <div class="meta-text">+ 15 others</div>
                                    </li>
                                    <li><i class="icofont-comment"></i> 05</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="block-box user-blog">
                            <div class="blog-img">
                                <a href="${pageContext.request.contextPath}/Directory/#"><img src="${pageContext.request.contextPath}/static/media/blog/blog_5.jpg" alt="Blog"></a>
                            </div>
                            <div class="blog-content">
                                <div class="blog-category">
                                    <a href="${pageContext.request.contextPath}/Directory/#">Sporty</a>
                                </div>
                                <h3 class="blog-title"><a href="${pageContext.request.contextPath}/Directory/#">Spoke with the developer sety 2020 Gaming Area</a></h3>
                                <div class="blog-date"><i class="icofont-calendar"></i> 15 October, 2020</div>
                                <p>when ann unknown printer took galley type and scrambled it to make aretype specimen book has survived not only.</p>
                            </div>
                            <div class="blog-meta">
                                <ul>
                                    <li class="blog-reaction">
                                        <div class="reaction-icon">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/reaction_1.png" alt="icon">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/reaction_2.png" alt="icon">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/reaction_3.png" alt="icon">
                                        </div>
                                        <div class="meta-text">+ 15 others</div>
                                    </li>
                                    <li><i class="icofont-comment"></i> 05</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="block-box user-blog">
                            <div class="blog-img">
                                <a href="${pageContext.request.contextPath}/Directory/#"><img src="${pageContext.request.contextPath}/static/media/blog/blog_6.jpg" alt="Blog"></a>
                            </div>
                            <div class="blog-content">
                                <div class="blog-category">
                                    <a href="${pageContext.request.contextPath}/Directory/#">Community</a>
                                    <a href="${pageContext.request.contextPath}/Directory/#">Inspiration</a>
                                </div>
                                <h3 class="blog-title"><a href="${pageContext.request.contextPath}/Directory/#">Spoke with the developer sety 2020 Gaming Area</a></h3>
                                <div class="blog-date"><i class="icofont-calendar"></i> 15 October, 2020</div>
                                <p>when ann unknown printer took galley type and scrambled it to make aretype specimen book has survived not only.</p>
                            </div>
                            <div class="blog-meta">
                                <ul>
                                    <li class="blog-reaction">
                                        <div class="reaction-icon">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/reaction_1.png" alt="icon">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/reaction_2.png" alt="icon">
                                            <img src="${pageContext.request.contextPath}/static/media/figure/reaction_3.png" alt="icon">
                                        </div>
                                        <div class="meta-text">+ 15 others</div>
                                    </li>
                                    <li><i class="icofont-comment"></i> 05</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--=====================================-->
        <!--=        Footer Area Start       	=-->
        <!--=====================================-->
        <footer class="footer-wrap footer-dashboard">
            <div class="main-footer">
                <div class="container">
                    <div class="row row-cols-lg-4 row-cols-sm-2 row-cols-1">
                        <div class="col">
                            <div class="footer-box">
                                <div class="footer-logo">
                                    <a href="${pageContext.request.contextPath}/Directory/index"><img src="${pageContext.request.contextPath}/static/media/logo_dark.png" alt="Logo"></a>
                                </div>
                                <p>Dorem ipsum dolor sit amet consec adipisicing elit sed do eiusmod por incidiut labore et loreLorem ipsum kelly amieo dolorey.</p>
                            </div>
                        </div>
                        <div class="col d-flex justify-content-lg-center">
                            <div class="footer-box">
                                <h3 class="footer-title">
                                    Important Links
                                </h3>
                                <div class="footer-link">
                                    <ul>
                                        <li><a href="${pageContext.request.contextPath}/Directory/index">Home</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/about-us">About us</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/shop">Shop</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/contact">Contacts</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col d-flex justify-content-lg-center">
                            <div class="footer-box">
                                <h3 class="footer-title">
                                    Community
                                </h3>
                                <div class="footer-link">
                                    <ul>
                                        <li><a href="${pageContext.request.contextPath}/Directory/newsfeed">NewsFeed</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/user-timeline">Profile</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/user-friends">Friends</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/user-groups">Groups</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/forums">Forums</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col d-flex justify-content-lg-center">
                            <div class="footer-box">
                                <h3 class="footer-title">
                                    Followers
                                </h3>
                                <div class="footer-link">
                                    <ul>
                                        <li><a href="${pageContext.request.contextPath}/Directory/https://www.facebook.com/">facebook</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/https://twitter.com/">twitter</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/https://www.instagram.com/">instagram</a></li>
                                        <li><a href="${pageContext.request.contextPath}/Directory/https://www.youtube.com/">Youtube</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-copyright">Copy© cirkle 2021. All Rights By <a href="${pageContext.request.contextPath}/Directory/http://www.bootstrapmb.com/">bootstrapmb</a></div>
            </div>
        </footer>



    </div>
    <!-- Chat Modal Here -->
    <div class="chat-conversion-box" id="chat-box-modal" tabindex="-1" aria-labelledby="chat-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="chat-modal-label">Fahim Rahman <span class="online"></span></h6>
                    <div class="action-icon">
                        <button class="chat-shrink"><i class="icofont-minus"></i></button>
                        <button type="button" class="close chat-close chat-open" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <ul class="chat-conversion">
                        <li class="chat-others">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_12.jpg" alt="Chat">
                            </div>
                            <div class="author-text">
                                <span>How are you Fahim vai ? Tommorow office will be your last day of Bachelor life.</span>
                            </div>
                        </li>
                        <li class="chat-you">
                            <div class="author-img">
                                <img src="${pageContext.request.contextPath}/static/media/figure/chat_11.jpg" alt="Chat">
                            </div>
                            <div class="author-text">
                                <span>hmm That's great</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Write your text here.....">
                            <div class="chat-plus-icon"><i class="icofont-plus-circle"></i></div>
                            <div class="file-attach-icon">
                                <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-slightly-smile"></i></a>
                                <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-camera"></i></a>
                                <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-image"></i></a>
                                <a href="${pageContext.request.contextPath}/Directory/#"><i class="icofont-mic"></i></a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Jquery Js -->
<script src="${pageContext.request.contextPath}/static/dependencies/jquery/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/popper.js/js/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/imagesloaded/js/imagesloaded.pkgd.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/isotope-layout/js/isotope.pkgd.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/slick-carousel/js/slick.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/sal.js/sal.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/magnific-popup/js/jquery.magnific-popup.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/mcustomscrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/select2/js/select2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/elevate-zoom/jquery.elevatezoom.js"></script>
<script src="${pageContext.request.contextPath}/static/dependencies/bootstrap-validator/js/validator.min.js"></script>
<script src="${pageContext.request.contextPath}/static/http://www.google.cn/maps/api/js?key=AIzaSyBtmXSwv4YmAKtcZyyad9W7D4AC08z0Rb4"></script>

<!-- Site Scripts -->
<script src="${pageContext.request.contextPath}/static/assets/js/app.js"></script>
</body>

</html>
